 <template>
 	<view>
 		<up-navbar leftIconColor="#FFFFFF" leftIconSize="44rpx" :title="navTitle" :autoBack="true" placeholder
 			bgColor="transparent">
 		</up-navbar>

 		<view class="main">
 			<up-empty v-if="result.list.length ===0 " mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
 			</up-empty>
 			<view class="item" v-for="item in result.list" :key="item.id">
 				<postUser :item='item' :time="false" @changeFollowStatus="followStatus" />
 			</view>
 		</view>
 		<up-back-top :scrollTop="scrollTop" :iconStyle="iconStyle" :duration="200" :bottom="20"></up-back-top>
 		<up-gap height="160rpx"></up-gap>
 	</view>
 </template>

 <script setup>
 	import postUser from "@/components/post/user.vue"
 	import openApi from "@/api/biz/open.js"
 	import {
 		ref,
 		reactive
 	} from "vue"
 	import {
 		onLoad,
 		onReachBottom,
 		onPageScroll
 	} from "@dcloudio/uni-app"

 	const navTitle = ref("我的关注")

 	const iconStyle = {
 		fontSize: '32rpx',
 		color: '#2979ff'
 	};
 	const scrollTop = ref(0);
 	onPageScroll((e) => {
 		scrollTop.value = e.scrollTop;
 	})

 	onReachBottom(() => {
 		if (result.list.length >= result.total) return;
 		params.pageNo++;
 		page()
 	})

 	const result = reactive({
 		list: [],
 		total: 0
 	})

 	const params = reactive({
 		pageNo: 1
 	})

 	const followStatus = () => {
 		params.pageNo = 1;
 		page()
 	}

 	function page() {
 		const userInfo = uni.getStorageSync("userInfo")
 		openApi.getUserFollowPage({
 			pageNo: params.pageNo,
 			pageSize: 10,
 			userId: type.value === '1' ? userInfo.id : "",
 			toUserId: type.value === '2' ? userInfo.id : "",
 		}).then((res) => {
 			if (res.code === 0) {
 				result.total = res.data.total;
 				let list = []
 				if (type.value === '1') {
 					list = res.data.list.map(item => {
 						return {
 							...item,
 							avatar: item.toUserAvatar,
 							nickname: item.toUserName,
 							userId: item.toUserId
 						}
 					})
 				} else {
 					list = res.data.list;
 				}
 				if (params.pageNo === 1) result.list = list;
 				else result.list = result.list.concat(list)
 			}
 		})
 	}

 	const type = ref();
 	onLoad((option) => {
 		type.value = option.type
 		if (+option.type === 2) navTitle.value = "我的粉丝"
 		page()
 	})
 </script>

 <style>
 	page {
 		background-color: #1B1829;
 	}
 </style>
 <style scoped lang="scss">
 	.main {
 		padding: 0 30rpx;

 		.item {
 			padding: 30rpx 0rpx 40rpx;
 			border-bottom: 1rpx solid rgba(255, 255, 255, .2);
 		}
 	}
 </style>